
#slider{
    display: inline-block;
    position: relative;
    width: 500px;
    height: 266px;
    padding: 0;
    margin: 0;
    margin-left: 5px;
    overflow: hidden;
    overflow: -moz-hidden-unscrollable;
}

#container{
    position: absolute;
    left: 0;
    top: 0;
    width: 500%;
    height: 266px;
    margin: 0px;
    padding: 0px;
    -webkit-animation: slide_anim 10s ease infinite; 
    -ms-animation: slide_anim 10s ease infinite; 
    -moz-animation: slide_anim 10s ease infinite;
    animation: slide_anim 10s ease infinite;
    transform: translateZ(0);
}

.slide{
    position: relative;
    display: inline-block;
    width: 500px;
    height: 266px;
    margin: 0;
    padding: 0;
}

.image{
    width: 500px;
    height: 266px;
}

@-webkit-keyframes slide_anim
{
0%,20%   {left: 0%;}
25%,45%  {left: -100%;}
50%,75%  {left: -200%;}
80%,95% {left: -300%;}
100% {left: -400%;}
}

@-ms-keyframes slide_anim
{
0%,20%   {left: 0%;}
25%,45%  {left: -100%;}
50%,75%  {left: -200%;}
80%,95% {left: -300%;}
100% {left: -400%;}
}

@-moz-keyframes slide_anim
{
0%,20%   {left: 0%;}
25%,45%  {left: -100%;}
50%,75%  {left: -200%;}
80%,95% {left: -300%;}
100% {left: -400%;}
}

@keyframes slide_anim
{
0%,20%   {left: 0%;}
25%,45%  {left: -100%;}
50%,75%  {left: -200%;}
80%,95% {left: -300%;}
100% {left: -400%;}
}

/* Style pour les ecrans jusqu'à 1000px de largeur */
@media all and (max-width: 1000px)
{
    #slider{
        display: none;
    }
}

/* Style pour les ecrans jusqu'à 700px de largeur */
@media all and (max-width: 700px)
{
    #slider{
        display: none;
    }
}